import React, { useEffect } from 'react';
import ThemeHeader from '@/components/theme-header-rcm';
import { RecommendRankingWrapper } from './style';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getTopListAction } from '../../store/actionCreators';
import TopRanking from '@/components/top-ranking';

const RecommendRanking = () => {
    // state and props


    //Hooks
    const dispatch = useDispatch()
    const {upRanking, newRanking, originalRanking } = useSelector(state=>{
        return {
            upRanking:state.getIn(["recommend","upRanking"]),
            newRanking:state.getIn(["recommend","newRanking"]),
            originalRanking:state.getIn(["recommend","originalRanking"])
        }
    },shallowEqual)
    useEffect(()=>{
        dispatch(getTopListAction(0))
        dispatch(getTopListAction(2))
        dispatch(getTopListAction(3))
    },[dispatch])
    //function
    return (
        <RecommendRankingWrapper>
            <ThemeHeader title="榜单"></ThemeHeader>
            <div className="tops">
                <TopRanking info={upRanking}>
                </TopRanking>
                <TopRanking info={newRanking}>
                </TopRanking>
                <TopRanking info={originalRanking}>
                </TopRanking>
            </div>
        </RecommendRankingWrapper>
    );
};

export default RecommendRanking;